<template>
  <div class="order-container">
    <div class="order-header">
      <p style="padding: 10px 50px 10px ;text-align: left;font-weight:bold">购物订单</p>
    </div>
    <hr />
    <div class="order-content">
      <div v-for="order in orderList.slice(0, 8)" :key="order.id" class="order-holder">
        <div class="order-content-header">
          <el-row>
            <el-col :span="4">订单号</el-col>
            <el-col :span="4">下单时间</el-col>
            <el-col :span="4">快递费用</el-col>
            <el-col :span="4">订单总金额</el-col>
            <el-col :span="4">订单状态</el-col>
          </el-row>
        </div>
        <div class="order-content-main">
          <el-row>
            <el-col :span="4">{{ order.id }}</el-col>
            <el-col :span="4">{{ order.createtime | timeFilter }}</el-col>
            <el-col :span="4">￥{{ order.deliverycost }}</el-col>
            <el-col :span="4">￥{{ order.totalcost }}</el-col>
            <el-col :span="4">
              <el-tag v-if="order.status === 8"  type="success">{{ order.status | statusFilter }}</el-tag>
              <el-tag v-if="order.status === 0"  type="primary">{{ order.status | statusFilter }}</el-tag>
              <el-tag v-if="order.status === 6"  type="info">{{ order.status | statusFilter }}</el-tag>
              <el-tag v-if="order.status === 9"  type="warning">{{ order.status | statusFilter }}</el-tag>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script>
import { mapGetters } from 'vuex'
import orderService from 'services/orderService.js'
import * as notifyUtil from 'utils/notifyUtil.js'

export default {
  data() {
    return {
      orderList: []
    }
  },
  computed: mapGetters({
    nowUser: 'nowUser'
  }),
  filters: {
    statusFilter(status) {
      if (status === 0) {
        return '派单中'
      }
      if (status === 6) {
        return '已接单'
      }
      if (status === 7) {
        return '已支付'
      }
      if (status === 8) {
        return '已完成'
      }
      if (status === 9) {
        return '已取消'
      }
    },
    timeFilter(timestamp) {
      let newDate = new Date(timestamp)
      // return newDate.toLocaleDateString()
      return (
        newDate.toLocaleDateString().replace(/\//g, '-') +
        ' ' +
        newDate.toTimeString().substr(0, 8)
      )
    }
  },
  methods: {
    getOrdersBySenderId() {
      orderService.getOrdersBySenderId(this.nowUser.id).then(response => {
        if (response.data.Order === null || response.data.Order === undefined) {
          notifyUtil.showError('获取订单信息失败', '商店暂无购物订单')
        } else {
          let result = response.data.Order
          this.orderList = result.reverse()
        }
      })
    }
  },
  mounted() {
    this.getOrdersBySenderId()
  }
}
</script>
  
<style scoped>
.order-container {
  margin-top: 50px;
  width: 1070px;
  height: 100%;
  min-height: 500px;
  float: left;
  /* text-align: left; */
  /* border: 1px solid #DCDFE6; */
  background-color: #ffffff;
}
.order-content {
  margin-top: 10px;
  width: 1000px;
  /* height: 800px; */
  margin-left: auto;
  margin-right: auto;
}
.order-holder {
  float: left;
  width: 80%;
  height: 80px;
  /* background-color:blue; */
  padding: 10px;
  margin-top: 5px;
  margin-bottom: 10px;
  box-sizing: border-box;
  border: 1px solid #e4e7ed;
  text-align: left;
}
.order-content-header {
  font-size: 15px;
  font-weight: 500;
  color: #606266;
}
.order-content-main {
  text-align: left;
  margin-top: 15px;
  font-size: 12px;
  line-height: 24px;
  font-weight: 500;
}
.order-timeline {
  margin-left: 20px;
  margin-top: 50px;
  width: 5%;
  float: left;
}
</style>
  

